<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

  <script src="../js/17.0.1/react.development.js"></script>
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <script src="../js/17.0.1/prop-types.js"></script>
  <script src="../js/17.0.1/babel.min.js"></script>

  <script type="text/babel">

    class Count extends React.Component {
      // 构造器
      constructor(props) {
        console.log("Count - constructor");
        super(props)
        this.state = {
          count: 0
        }
      }
      add = () => {
        let { count } = this.state
        this.setState({ count: count += 1 })
      }
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById("app"))
      }
      fouce = () => {
        this.forceUpdate()
      }
      // 组件将要挂载之前的钩子
      // UNSAFE_componentWillMount() {
      //   console.log("Count - UNSAFE_componentWillMount");
      // }
      // 组件挂载完成调用
      componentDidMount() {
        console.log("Count - componentDidMount");
      }
      若state的值在任何时候都取决去props
      static getDerivedStateFromProps(props,state) {
        console.log("Count --- getDerivedStateFromProps",props,state);
        return null;
        // return props;
      }
      // 组件是否应该被更新 阀门 不写方法默认为true
      shouldComponentUpdate() {
        console.log("Count - shouldComponentUpdate");
        return true
      }
      // 组件将要更新
      // UNSAFE_componentWillUpdate() {
      //   console.log("Count - UNSAFE_componentWillUpdate");
      // }
      
      // 组件更新之前获取快照
      getSnapshotBeforeUpdate(preProps,preState) {
        console.log("Count ---- getSnapshotBeforeUpdate",preProps,preState);
        return "atguigu";
      }

      // 组件更新完成
      componentDidUpdate(preProps,preState,snapshotValue) {
        console.log("Count - componentDidUpdate",preProps,preState,snapshotValue);
      }
      // 组件将要卸载
      componentWillUnmount() {
        console.log("Count - componentWillUnmount");
      }
      // 组件初始化 状态改变调用
      render() {
        console.log("Count - render");
        const { count } = this.state
        return (
          <div>
            <h2>当前求和为:{count}</h2>
            <button onClick={this.add}>点我+1</button>
            <button onClick={this.fouce}>不更改组件状态强制更新</button>
            <button onClick={this.death}>卸载组件</button>
          </div>
        )
      }
    }

    

    ReactDOM.render(<Count count={199}/>, document.getElementById("app"))


  </script>
</body>

</html>